﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<KLS.PPDS.Web.Models.StoryboardViewModel>" %>
<%@ Import Namespace="KLS.PPDS.Resources" %>
<%@ Import Namespace="KLS.PPDS.Utility" %>
<%@ Import Namespace="KLS.PPDS.Utility.Extension" %>
<%@ Import Namespace="KLS.PPDS.Utility.Html" %>


	<script type ="text/javascript">
	    $(function () {

	        $(".draggable").draggable({

	            start: function (event, ui) {
	                IsDragging = true;
	                //alert($(this).attr('id'));
	                storyBoard.SelectedArticle.Id = $(this).attr('id');
	                storyBoard.CurrentPageNumber = $(this).parent().attr('id');
	                storyBoard.SelectedArticle.left = $(this).css('left');
	                storyBoard.SelectedArticle.top = $(this).css('top');




	            },
	            drag: function (event, ui) {

	                storyBoard.SelectedArticle.left = $(this).css('left');
	                storyBoard.SelectedArticle.top = $(this).css('top');
	                //$('#btnInfo').attr('value', storyBoard.SelectedArticle.left + '  top:' + storyBoard.SelectedArticle.top);
	                //alert(storyBoard.SelectedArticle.left);

	            },
	            zIndex: 1000,
	            ghosting: false,
	            opacity: 0.7,
	            revert: 'invalid'

	        });

	        $(".droppable").droppable(
            {
                drop: function (event, ui) {
                    // alert(ui.draggable.text());
                    
                    storyBoard.TargetPageNumber = $(this).attr('id');
                    currentlyDraggingItem = ui;
                    MoveArticle();
                    $(this).removeClass("dragOver");
                },

                over: function(event, ui)
                {
                $(this).addClass("dragOver");
                },

                out: function (event, ui) {
                    $(this).removeClass("dragOver");
                }
            });




	    });


    </script>






  <%-- <h3> <%=Model.Publication.PublicationName %></h3>--%>
<table style="width:100%">
<tr>
<td>
    <% if (CommonSession.IsUserGraphicsDesigner.Equals(false)) 
       {%>       
        <%:Html.DivActionLink(CommonString.NewArticle, "", new {@onclick=string.Format("OpenArticle('/Article/index?publicationId={0}&&articleId={1}')",Model.Publication.Id,0), @class = "newArticle-button" })%>
    <%}%>
   </td>
   
   <td  style=" text-align:center"> 
        <%Html.RenderPartial("PublicationTitle",Model.Publication); %>
    </td>
   <td>
   <%:Html.DivActionLink(CommonString.GoToLayout, "", new { @onclick = string.Format("OpenLayout('/Article/ShowLayout?publicationId={0}')", Model.Publication.Id), @class = "layout-button" })%>   
   </td>
   </tr>

</table>


<br />
<br />
<div class="StoryBoard" id="StoryBoard">

<input  type="hidden" id="publicationId" value="<%=Model.Publication.Id %>" />

<%
    Html.RenderPartial("~/Views/Storyboard/Article.ascx");%>





</div><!-- End demo -->
